import Taro, {Component} from '@tarojs/taro'
import {View, Input, Swiper, SwiperItem, Image} from '@tarojs/components'
import {AtGrid} from 'taro-ui'
import Boutique from './boutique/boutique'
import Promotion from './promotion/promotion'

import './index.less'

class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  render() {
    return (
      <View className='index'>
        <View className='index_whole'>
          <Input type='text' className='index_select_input' placeholder='搜索您想要的商品'/>
          <Swiper
            className='index_swiper'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            circular
            indicatorDots
            autoplay >
            <SwiperItem>
              <View className='index_swiperitem'>
                <Image className='index_swiperImage' src={require('../../assets/index-banner.png')}/>
              </View>
            </SwiperItem>
            <SwiperItem>
              <View className='index_swiperitem'>
                <Image className='index_swiperImage' src={require('../../assets/index-banner2.png')}/>
              </View>
            </SwiperItem>
          </Swiper>
          <AtGrid columnNum='4' hasBorder={false} data={
            [
              {
                image: require('../../assets/grid/ic-fenlei.png'),
                value: '商品分类'
              },
              {
                image: require('../../assets/grid/ic-youhui.png'),
                value: '领优惠券'
              },
              {
                image: require('../../assets/grid/ic-zixun.png'),
                value: '行业资讯'
              },
              {
                image: require('../../assets/grid/ic-qiandao.png'),
                value: '我要签到'
              },
              {
                image: require('../../assets/grid/ic-shoucang.png'),
                value: '我的收藏'
              },
              {
                image: require('../../assets/grid/ic-pingtuan.png'),
                value: '拼团活动'
              },
              {
                image: require('../../assets/grid/ic-miaosha.png'),
                value: '秒杀活动'
              },
              {
                image: require('../../assets/grid/ic-kanjia.png'),
                value: '砍价活动'
              }
            ]
          }/>
        </View>
        <View className='index_not_back'>
          <View className='at-row'>
            <View className='at-col index_news'>
              <Image className='index_news_image' src={require('../../assets/news/news.png')}/>
              <View className='index_news_title'>新闻简报</View>
              <View className='index_news_content'>已上线啦啦啦啦啦啦啦啦</View>
            </View>
          </View>
          <Boutique />
          <Promotion />
        </View>
      </View>
    )
  }
}

export default Index
